<template>
  <div class="content flex">
    <div class="text">请按顺序输入记助词，以确认您的正确身份。</div>
    <div class="form">
      <input
        type="text"
        placeholder="记助词01"
        v-model="text1"
      >
      <input
        type="text"
        placeholder="记助词02"
        v-model="text2"
      >
      <input
        type="text"
        placeholder="记助词03"
        v-model="text3"
      >
      <input
        type="text"
        placeholder="记助词04"
        v-model="text4"
      >
      <input
        type="text"
        placeholder="记助词05"
        v-model="text5"
      >
      <input
        type="text"
        placeholder="记助词06"
        v-model="text6"
      >
      <input
        type="text"
        placeholder="记助词07"
        v-model="text7"
      >
      <input
        type="text"
        placeholder="记助词08"
        v-model="text8"
      >
      <input
        type="text"
        placeholder="记助词09"
        v-model="text9"
      >
      <input
        type="text"
        placeholder="记助词10"
        v-model="text10"
      >
      <input
        type="text"
        placeholder="记助词11"
        v-model="text11"
      >
      <input
        type="text"
        placeholder="记助词12"
        v-model="text12"
      >
    </div>
    <div
      class="btn-row"
      @click="change"
    >确认</div>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      text1: '',
      text2: '',
      text3: '',
      text4: '',
      text5: '',
      text6: '',
      text7: '',
      text8: '',
      text9: '',
      text10: '',
      text11: '',
      text12: '',
      mobile: ''
    }
  },
  mounted: function () {
    this.mobile = this.$route.query.mobile
  },
  methods: {
    change () {
      let list = [this.text1, this.text2, this.text3, this.text4, this.text5, this.text6, this.text7, this.text8, this.text9, this.text10, this.text11, this.text2]
      list.push()
      axios({
        method: 'post',
        url: 'http://dev.518jinsha.com/' + 'home/index/second',
        headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
        data: qs.stringify({inputdata: list, mobile: this.mobile})
      }).then((res) => {
        this.$layer.msg(res.data.msg)
        this.$router.push({
        // 核心语句
          path: 'pwd', // 跳转的路径
          query: { // 路由传参时push和query搭配使用 ，作用时传递参数
            mobile: this.mobile
          }
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content {
  background: #fff;
  width: auto;
  height: auto;
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  flex-direction: column;
  .text {
    font-size: 16px;
    color: #c8c7cc;
    margin-top: 15px;
    text-align: center;
  }
  .form {
    display: flex;
    display: inline-flex;
    width: 100%;
    padding: 16px 0px;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 20px;
    position: relative;
    &:before {
      transform: scaleY(0.5);
      background-color: #c8c7cc;
      position: absolute;
      right: 0;
      top: 0;
      left: 0;
      height: 0.5px;
      content: "";
    }
    &:after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 0.5px;
      content: "";
      transform: scaleY(0.5);
      background-color: #c8c7cc;
    }
    input {
      width: 6%;
      padding: 8px 7%;
      margin: 5px 2%;
      border: 1px solid #c8c7cc;
      font-size: 7px;
    }
  }
  .btn-row {
    background-color: #0faeff;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    line-height: 2.55555556;
    border-radius: 5px;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    width: 90%;
    margin-top: 25px;
    color: #fff;
  }
}
</style>
